
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<base href="<%=basePath%>">

<!-- Bootstrap core CSS -->
<link href="<%=path%>/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="<%=path%>/css/bootstrap-table.css">


<!-- Custom styles for this template -->

<script src="<%=path%>/js/jquery.min.js"></script>
<script src="<%=path%>/js/bootstrap.min.js"></script>
<script src="<%=path%>/js/bootstrap-table.js"></script>


<!-- sigma-->
<script src="<%=path%>/js/sigma.min.js"></script>
<%-- <script src="<%=path%>/js/jquery-scrolltofixed-min.js"></script> --%>
<script src="<%=path%>/js/highlight.pack.js"></script>
<script src="<%=path%>/js/sigma.plugins.animate.min.js"></script>
<script src="<%=path%>/js/sigma.parsers.json.min.js"></script>
<script src="<%=path%>/js/sigma.plugins.neighborhoods.min.js"></script>
<script src="<%=path%>/js/sigma.plugins.dragNodes.min.js"></script>
<script src="<%=path%>/js/sigma.layout.forceAtlas2.min.js"></script>

<style>
#sigma-container3 {
	max-width: 700px;
	height: 500px;
	margin: auto;
}

body {
	font-size: 62.5%;
}

label, input {
	display: block;
}

input.text {
	margin-bottom: 12px;
	width: 95%;
	padding: .4em;
}

fieldset {
	padding: 0;
	border: 0;
	margin-top: 25px;
}

h1 {
	font-size: 1.2em;
	margin: .6em 0;
}

div#users-contain {
	width: 350px;
	margin: 20px 0;
}

div#users-contain table {
	margin: 1em 0;
	border-collapse: collapse;
	width: 100%;
}

div#users-contain table td, div#users-contain table th {
	border: 1px solid #eee;
	padding: .6em 10px;
	text-align: left;
}

.ui-dialog .ui-state-error {
	padding: .3em;
}

.validateTips {
	border: 1px solid transparent;
	padding: 0.3em;
}
</style>
<!-- Begin Content -->

<div class="panel panel-default">
	<div class="panel-body">
			<div class="row">
				<div class="col-lg-2 col-md-2 col-sm-2">
					<h4>数据集</h4>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3">
					<select data-toggle="dropdown" id="datasets" 
					class="form-control select select-success">
						<option value="none">设置数据集</option>
					</select>
				</div>
			</div>
	</div>
	<div class="panel-body">
		<div class="row">
			<div class="col-sm-3">
				<input id="gamma" type="text" class="form-control"
					placeholder="Gamma" aria-describedby="basic-addon1">
			</div>
			<div class="col-sm-3">
				<input id="iter" type="text" class="form-control" placeholder="Iter"
					aria-describedby="basic-addon1">
			</div>
			<div class="col-sm-3">
				<input id="topksim" type="text" class="form-control "
					placeholder="Top K" aria-describedby="basic-addon1">
			</div>
			<div class="col-sm-3">
				<button type="button" class="btn btn-default btn-primary"
					onclick="giveParamSim();">确定</button>
			</div>
		</div>
	</div>
</div>

<div class="panel panel-default">
	<div class="panel-body ">
		<div id="sigma-container3"></div>
	</div>
</div>
<div class="panel panel-default panel-info" id="show_kat" style="display: none;font-size: 16px;">
<div class='panel-heading'>预测结果:</div>
	<div class="panel-body">
		<table id="tt_sim">
		</table>
	</div>
</div>
<div id="ajaxdataset" style="display: none;"></div>


<script type="text/javascript">
$.ajax({
			type : "post",//请求方式
			url : "servlet/fileslistservlet",//发送请求地址
			dataType : "json",
			//请求成功后的回调函数有两个参数
			success : function(data) {
				var datats=eval(data);
				datats.forEach(function(mydata) {
					$("#datasets").append("<option value='"+mydata+"'>"+mydata+"</option>"); 
				});
			}
		});
		
		$("#datasets").change(function(data){
			if($(this).val()=="none"){
				$("#ajaxdataset").val("");
			}else{
				initSigma("<%=path%>/duansky/data/"+$(this).val(),2);
				$("#ajaxdataset").val($(this).val());
			}
			
	 	 });

function checkRateSim(input)
{
     var re = /^[0-9]+.?[0-9]*$/;   //判断字符串是否为数字     //判断正整数 /^[1-9]+[0-9]*]*$/  
   	 //var nubmer = document.getElementById(input).value;
    
     if (!re.test(input))
    {
       	return false;
    }
    return true;
}
	var fileName ="<%=path%>/duansky/data/data.json";
	var mysigma_sim;
	initSigma(fileName,1);
	function initSigma(fileName,state){
		if(typeof(mysigma_sim) != "undefined"){
				mysigma_sim.kill();
			}
		sigma.parsers.json(fileName,
            {
                container: 'sigma-container3'
            },
            function(s) {
            	mysigma_sim=s;
            	
            	mysigma_sim.settings({
					edgeColor : 'default',
					defaultEdgeColor : '#ccc',
				});
		
				mysigma_sim.graph.nodes().forEach(
						function(n) {
							 n.color = [ '#f8aba6', '#f47a55', '#fab27b', '#ffce7b',
									'#45b97c', '#65c294', '#585eaa', '#9b95c9' ][Math
									.round(Math.random() * 8)];
						});
		
				mysigma_sim.graph.edges().forEach(function(e) {
					e.type = 'arrow';
				});
		
				mysigma_sim.refresh();

            }
    );
	}
    
    function changeSim(){
		$('#tt_sim').bootstrapTable({
	    	method: 'get',
	        url: 'libohan/data/table.json',
	        height: $(window).height() - 200,
	        striped: true,	
	        columns: [{
	            field: 'source',
	            title:'Source'
	        }, {
	            field: 'target',
	            title: 'Target',
	        }, {
	            field: 'value',
	            title: 'Score',
	        }]
		});
		$('#tt_sim').bootstrapTable('refresh',{
	        url: 'libohan/data/table.json',
		});
		var ui = document.getElementById("show_kat");
		ui.style.display="block";
	}
	

function giveParamSim()
{		if($("#ajaxdataset").val()=="") {
			alert("必须选择数据集！");
		}else{
			if(!checkRateSim(document.getElementById("gamma").value) || !checkRateSim(document.getElementById("topksim").value)
					|| !checkRateSim(document.getElementById("iter").value))
			{
					alert("参数无效！");
					return;
			}
			if (document.getElementById("gamma").value <= 0 || document.getElementById("gamma").value > 1){
					alert("参数无效！");
					return;		
			}
			if (document.getElementById("iter").value <= 0 ){
					alert("参数无效！");
					return;		
			}
			if (document.getElementById("topksim").value <= 0 ){
					alert("参数无效！");
					return;		
			}
			var params={
			"func_type":"givepara",
			"alg_type":"sim",
			"gamma":document.getElementById("gamma").value,
			"iter":document.getElementById("iter").value,
			"topksim":document.getElementById("topksim").value,
			"dataset":$("#ajaxdataset").val()
			 };
			$.ajax({
			type:"post",//请求方式
			url:"servlet/boHansevlet",//发送请求地址
			dataType:"text",
			data: params,
			//请求成功后的回调函数有两个参数
			success:function(data){
				if(typeof(mysigma_sim) != "undefined"){
					mysigma_sim.kill();
				}
				/*
				$("#sigma-container3").empty();
				mysigma_sim.graph.nodes().length = 0;
				mysigma_sim.graph.edges().length = 0;
				delete mysigma_sim.graph.nodes();
				delete mysigma_sim.graph.edges();
				*/
				
				changeSim(); 
				
				sigma.parsers.json(
				'<%=path%>/libohan/data/data_sim.json', {
						container : 'sigma-container3'
					}, function(s) {
						console.log(s);
						mysigma_sim = s;
						
						mysigma_sim.settings({
							edgeColor : 'default',
							defaultEdgeColor : '#ccc',
						});

						mysigma_sim.graph.nodes().forEach(function(n) {
							if (n.color != '#ff0000')
								n.color = '#bbf';
						});
						
						mysigma_sim.graph.nodes().forEach(
							function(n) {
								 n.color = [ '#f8aba6', '#f47a55', '#fab27b', '#ffce7b',
										'#45b97c', '#65c294', '#585eaa', '#9b95c9' ][Math
										.round(Math.random() * 8)];
							});
			
						mysigma_sim.graph.edges().forEach(function(e) {
							e.type = 'arrow';
						});
						
						mysigma_sim.refresh();

					});

					$("#dd_sim").dialog('close');

				}
			});
		}
	}
	function open1Sim() {
		$("#dd_sim").dialog('open');
		document.getElementById("graph").style.display = "none";
	}
</script>